import { useEffect, useState, useCallback, Fragment } from 'react'
import { useParams } from 'react-router-dom'
import { PageHeader, Descriptions, Tabs } from 'antd'
import { http } from '@/utils/http'
import './index.scss'

export default function NewsPreview() {
  // 从路径params参数中获取文章id
  const { id } = useParams()
  const [previewList, setPreviewList] = useState([])  // 预览文章数据数组

  // 获取要预览的文章的数据
  const getPreviewList = useCallback(async () => {
    const { data } = await http.get(`/news?id=${id}&_expand=category&_expand=role`)
    console.log(data[0])
    setPreviewList(data)
  }, [id])

  useEffect(() => {
    getPreviewList()
  }, [getPreviewList])

  // 定义转化时间戳的函数
  const formatTime = originVal => {
    const dt = new Date(originVal)
    const year = dt.getFullYear()
    const month = (dt.getMonth() + 1 + '').padStart(2, '0')
    const date = (dt.getDate() + '').padStart(2, '0')
    const hour = (dt.getHours() + '').padStart(2, '0')
    const minute = (dt.getMinutes() + '').padStart(2, '0')
    const second = (dt.getSeconds() + '').padStart(2, '0')

    return `${year}-${month}-${date} ${hour}:${minute}:${second}`
  }

  // 定义审核状态的映射数组
  const auditMapList = ["未审核", "审核中", "已通过", "未通过"]

  // 定义发布状态的映射数组
  const publishMapList = ["未发布", "待发布", "已上线", "已下线"]

  // 定义颜色的映射数组
  const colorList = ["black", "orange", "green", "red"]

  return (
    <Fragment>
      {
        previewList[0]
        &&
        <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={previewList[0].title}
            subTitle={previewList[0].category.title}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">{previewList[0].author}</Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {formatTime(previewList[0].createTime)}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {
                  previewList[0].publishTime ? formatTime(previewList[0].publishTime) : ' - '
                }
              </Descriptions.Item>
              <Descriptions.Item label="区域">{previewList[0].region}</Descriptions.Item>
              <Descriptions.Item label="审核状态" contentStyle={{ color: colorList[previewList[0].auditState] }}>
                {
                  auditMapList[previewList[0].auditState]
                }
              </Descriptions.Item>
              <Descriptions.Item label="发布状态" contentStyle={{ color: colorList[previewList[0].publishState] }}>
                {
                  publishMapList[previewList[0].publishState]
                }
              </Descriptions.Item>
              <Descriptions.Item label="访问数量" contentStyle={{ color: 'green' }}>
                {previewList[0].view}
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量" contentStyle={{ color: 'green' }}>
                {previewList[0].star}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量" contentStyle={{ color: 'green' }}>0</Descriptions.Item>
            </Descriptions>
          </PageHeader>

          {/* 文章内容 */}
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="新闻内容" key="1" style={{
              height: "340px",
              overflow: 'auto',
              padding: '0 24px'
            }}>
              <div
                dangerouslySetInnerHTML={{
                  __html: previewList[0].content
                }} />
            </Tabs.TabPane>
          </Tabs>

        </div>
      }
    </Fragment>
  )
}